<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改div，解决第一键卡顿问题</title>
    <style>
        #box1{
            width: 60px;
            height: 60px;
            background-color: rgb(87, 167, 236);
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            left: 100px;
            top: 100px;
            position:relative;
            line-height: 100px;
        }
    </style>
</head>
<body style="height: 1000px;">
    <div id="box1"></div>
    <div id="box2">&nbsp;&nbsp;j增速,k减速</div>
</body>
</html>
<script>
    /*
        使 div 可以根据不同的方向键，向不同的方向移动
            按左键 ，向左移、按右键 ，向右移、按上键 ，向上移、按下键 ，向下移
    */
   
    // 创建一个变量表示方向
    var dir = 0 ;

    // 定义一个变量来控制移动速度
    var speed;

    // 开启一个定时器，来控制 div 速度
    setInterval(function(){
        // 判断按下的是哪个键
        switch(dir){
            // 是否按下，上键
            case 38:
                box1.style.top = box1.offsetTop - speed +"px";
                break;
            // 是否按下，下键
            case 40:
                box1.style.top = box1.offsetTop + speed +"px";
                break;
            // 是否按下，左键
            break;
            case 37:
                box1.style.left = box1.offsetLeft - speed +"px";
                break;
            // 是否按下，右键
            break;
            case 39:
                box1.style.left = box1.offsetLeft + speed +"px";
                break;
            break;
        }
        
    },30);

    
    var box1 = document.getElementById("box1");
    document.onkeydown = function(event){
        // 解决浏览器兼容性问题
        event = event || window.event;

        // 按下 空格加速
        if(event.ctrlKey){
            // j 加速
            speed=30;
        }else{
            speed=10;
        }

        // 使 dir 等于按键的值
        dir = event.keyCode;
        
        // 取消默认行为
        return false;
    };

    // 当按键松开时，div停止移动
    document.onkeyup = function(){
        dir = 0;
    }
</script>